<template>
  <div class="energy_consume">
    <!-- <div v-if="timeType === 'Hourly'" class="ffu_total">
      <iframe
        id="preivewFrame"
        class="iframe-con"
        scrolling="no"
        :src="`${VITE_FANRUAN_BASE_URL}/webroot/decision/view/duchamp?viewlet=energy/${templateName}&startTime=2024-06-01 00:00:00&endTime=2024-07-09 23:59:59&factory=创新中心一期`"
        frameborder="0"
      />
    </div> -->
    <div v-if="timeType === 'Daily'" class="ffu_total">
      <iframe
        id="preivewFrame"
        class="iframe-con"
        scrolling="no"
        :src="`${VITE_FANRUAN_BASE_URL}/webroot/decision/view/duchamp?viewlet=energy/${templateName}&startTime=${queryParams.startTime}&endTime=${queryParams.endTime}&factory=${factoryName}`"
        frameborder="0"
      />
    </div>
    <div v-if="timeType === 'Monthly'" class="ffu_total">
      <iframe
        id="preivewFrame"
        class="iframe-con"
        scrolling="no"
        :src="`${VITE_FANRUAN_BASE_URL}/webroot/decision/view/duchamp?viewlet=energy/${templateName}&startTime=${queryParams.startTime}&endTime=${queryParams.endTime}&factory=${factoryName}`"
        frameborder="0"
      />
    </div>
    <div v-if="timeType === 'Yearly'" class="ffu_total">
      <iframe
        id="preivewFrame"
        class="iframe-con"
        scrolling="no"
        :src="`${VITE_FANRUAN_BASE_URL}/webroot/decision/view/duchamp?viewlet=energy/${templateName}&startTime=${queryParams.startTime}&endTime=${queryParams.endTime}&factory=${factoryName}`"
        frameborder="0"
      />
    </div>
  </div>
</template>
<script setup lang="ts">
import { computed } from "vue";

const { VITE_FANRUAN_BASE_URL } = import.meta.env;

interface Props {
  params?: any;
}

const props = withDefaults(defineProps<Props>(), {});
const queryParams = computed(() => props.params);
const timeType = computed(() => props.params.queryTimeGranularity);
const factoryName = computed(() => props.params.factory);

const templateName = computed(() => {
  switch (timeType.value) {
    // case "Hourly":
    //   return encodeURIComponent(encodeURIComponent("supplyOverviewDieselHourly")) + ".fvs";
    //   break;
    case "Daily":
      return encodeURIComponent(encodeURIComponent("supplyOverviewDieselDaily")) + ".fvs";
      break;
    case "Monthly":
      return encodeURIComponent(encodeURIComponent("supplyOverviewDieselMonthly")) + ".fvs";
      break;
    case "Yearly":
      return encodeURIComponent(encodeURIComponent("supplyOverviewDieselYearly")) + ".fvs";
      break;
    default:
      return encodeURIComponent(encodeURIComponent("supplyOverviewDieselMonthly")) + ".fvs";
      break;
  }
});
</script>

<style lang="scss" scoped>
.energy_consume {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;

  .ffu_total {
    width: 100%;
    height: 700px;
    background-color: #fff;

    .iframe-con {
      box-sizing: border-box;
      width: 100%;
      height: 100%;
      overflow: hidden !important;
      border: 0;
    }
  }
}
</style>
